<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>个人资料</title>
    <link href="css/mui.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/mui.picker.css" />
    <link rel="stylesheet" href="css/mui.poppicker.css" />
    <link rel="stylesheet" href="css/personal-data.css" />
    <link rel="stylesheet" href="css/mui.dtpicker.css" />
    <link rel="stylesheet" href="iconfont/iconfont.css" />
    <style>
        /*对弹出框样式的设置*/
       .mui-btn,.mui-btn-blue,.mui-poppicker-btn-cancel,.mui-poppicker-btn-ok{
       	   border:none!important;
	       font-size:0.3rem!important;
           color:rgba(36,36,36,1);
           background:transparent;
        }
    	.mui-picker{
    		background-color: #fff !important;
    	}
    </style>
</head>
<body>
    <!--header开始-->
      <header>
        <main>
	      	<div class="iconfont icon-fanhui " style="font-size:0.34rem"></div>
	      	<div style="font-size:0.34rem;color:#fff;">个人资料</div>
	      	<div></div>
      	</main>
      </header>
    <!--header结束-->
    <div class="headercontain"></div>
    <!--content开始-->
    <section class="content">
    <!--上传头像-->
    	<div class="personal-imgBox">
    		<div class="personal-img">
    			<form class="personal-smallimg" style="background-image: url(img/aimg.png);" method="post" id="showimg">
    			   <input type="button" name="personalimg" />
    			   <div class="personal-photo"></div>
    			</form>
    		</div>
    	</div>
    	<!--上传头像选择开始-->
        <section class="headimgNotice">
        	<ul>
        		<li>从相册选择图片</li>
        	   <li>拍照</li>
        	    <li>取消</li>
        	</ul>
        </section>
    	<!--上传头像选择结束-->
    	<!--个人信息-->
    	<div class="personal-info">
			<ul>
				<li>
					<main>
						<span class="pinfo-title">昵称</span>
						<span class="pinfo-data" contenteditable="true" id="nicheng">摸了个鱼</span>	
					</main>
				</li>
				<li id='showSexPicker'>
					<main>
						<span class="pinfo-title">性别</span>
						<div style="display: flex;align-items: center;">
							<span class="pinfo-data ui-alert" style="margin-right:0.1rem" id='sexResult' >男</span>
							<span class="iconfont icon-leftpoint"></span>
						</div>
					</main>
				</li>
				<li id='showCityPicker'>
					<main>
						<span class="pinfo-title">所在地</span>
						<div style="display: flex;align-items: center;">
							    <!--地址弹出框-->
							<span class="ui-alert  pinfo-data" id='cityResult' style="margin-right:0.1rem">浙江省杭州市</span>
							<span class="iconfont icon-leftpoint"></span>
						</div>
					</main>	
				</li>
				<li data-options='{"type":"date","beginYear":1960}' class="birthday">
					<main style="border-bottom: none;">
						<span class="pinfo-title">生日</span>
						<div  style="display: flex;align-items: center;">
							<!--日期弹出框-->
							<span class="pinfo-data ui-alert"  id="birthday" style="margin-right:0.1rem">1994-10-14</span>
							<span class="iconfont icon-leftpoint"></span>
						</div>
					</main>
				</li>
				<li style="margin:0.16rem 0;">
					<main style="border-bottom: none;">
						<span class="pinfo-title">个性签名</span>
						<span class="pinfo-data" contenteditable="true" id="usersign">一个人的生活要学会好好的</span>
					</main>
				</li>
				<li>
					<main>
					  <span class="pinfo-title">经验介绍</span>
					</main>
				</li>
				<li style="height:auto;padding:0;position:relative;">
					<textarea placeholder="描述你的过往经验介绍吧" name="experience" rows="" cols="" style="width:100%;height:2rem;" id="userexp"></textarea>
					<span class="restexp">60</span>
				</li>
			</ul>
    	</div>
    </section>
    <!--content结束-->
</body>
<script type="text/javascript" src="js/mui.js"></script>
<script>mui.init();</script>
<script src="js/pxtorem.js"></script>
<script src="js/scrollnone.js"></script>
<script src="js/personal-data.js"></script>
<script src="js/mui.picker.js"></script>
<script type="text/javascript" src="js/mui.poppicker.js"></script>
<script src="js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.dtpicker.js"></script>
<script src="js/apptool.js"></script>
<script src="js/personal-data.js"></script>
<script type="text/javascript" src="ajax/common.js"></script>
<script src="ajax/userInfo.js"></script>
<script>
mui.plusReady(function(){
	var doc=document;
	//弹出生日的实现
		var birthday = mui('#birthday')[0];
		var btns = mui('.birthday');
		btns.each(function(i, btn) {
			btn.addEventListener('tap', function() {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						birthday.innerText =rs.text;
//						console.log(birthday.innerText)
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					var id = this.getAttribute('id');
					_self.picker = new mui.DtPicker(options);
					_self.picker.show(function(rs) {
						birthday.innerText = rs.text;
						_self.picker.dispose();
						_self.picker = null;
					});
				}
				
			}, false);
		});
			  //弹出性别
	              var showSexPickerButton = doc.getElementById('showSexPicker');
				  var sexResult = doc.getElementById('sexResult');
	              var showSexPicker = new mui.PopPicker({
				            layer: 1
			        });
					showSexPicker.setData([{
						value: 'ywj',
						text: '男'
					}, {
						value: 'aaa',
						text: '女'
					}]);
					showSexPickerButton.addEventListener('tap', function(event) {
						 event.stopPropagation();
						showSexPicker.show(function(items) {
//							sexResult.innerText = JSON.stringify(items[0]);
                            sexResult.innerText =items[0].text;
//							console.log(sexResult.innerText)
							//返回 false 可以阻止选择框的关闭
//							return false;
						});
					}, false);
				//弹出地址的实现
			var _getParam = function(obj, param) {
				return obj[param] || '';
			};
			var showCityPickerButton = doc.getElementById('showCityPicker');
			var cityResult = doc.getElementById('cityResult');
			showCityPickerButton.addEventListener('tap', function(event) {
				var cityPicker = new mui.PopPicker({
				 layer: 2
			    });
				cityPicker.setData(cityData);
				event.stopPropagation();
				cityPicker.show(function(items) {
					cityResult.innerText = items[0].text+ items[1].text;
//					console.log(cityResult.innerText);
//
				});
			}, false);
})
</script>
</html>